<template>
   <div>
    case1 :<input v-model="message.foo.bar.name" type="text" />
    <hr>
    case2 : <input v-model="message2.foo.bar.name" type="text" />
   </div>
   <div id="ipt">box</div>
   <button @click="stopWatch">停止监听</button>
</template>

<script setup lang='ts'>
import { ref, watch, reactive,watchEffect } from 'vue'
let message = reactive({
  foo:{
    bar:{
      name: "殷志伟"
    }
  }
})
let message2 = reactive({
  foo:{
    bar:{
      name: "殷志伟真帅"
    }
  }
})
// let message = ref<string>("xiaoman")
let message3 = ref<string>("daman")
let stop =  watchEffect((oninvalidata)=>{
    console.log("message=====>",message.foo.bar.name);
    let ipt:HTMLInputElement = document.querySelector('#ipt') as HTMLInputElement
    console.log(ipt,"ellllllll");
    
    oninvalidata(()=>{
      //监听之前触发（如防抖）
      console.log("before");
      
    })
    
  },{
    flush:"post",// dom元素更新后拿到值，不然为null
    // onTrigger(e){
    //   //调试
    //   debugger
    // }
  })
  const stopWatch = () => stop()
// watch(()=>message2.foo.bar.name,(newValue,oldValue)=>{
//   //
//   console.log(newValue,oldValue);
  
// },{
//   deep:true, //深度监听
//   // immediate:true,//立即执行一次
//   flush:"pre" // pre 组件更新之前调用  sync 同步 post 组件更新智慧执行
// })


</script>

<style scoped>

</style>